src/hooks/useAudioPreloader.ts (2)

86-91: ⚠️ Potential issue | 🟠 Major

onEnded stale closure: wrong callback silently invoked after prop change.

handleEnded captures onEnded from the render-time closure (line 88), but onEnded is absent from the useEffect dependency array (line 114). If the parent re-renders with a new onEnded while snippets stays referentially identical, every ended event will invoke the old callback—silently, with no error.

Adding onEnded to the dep array is not the right fix either; it would tear down and recreate all Audio objects on every callback identity change.

The idiomatic React 19.2 fix is useEffectEvent, which is imported directly from react. Effect Events always "see" the latest values from render (like props and state) without re-synchronizing the Effect, so they are excluded from Effect dependencies.

🛡️ Proposed fix using useEffectEvent

-import { useEffect, useState, useRef, useCallback } from 'react'
+import { useEffect, useState, useRef, useCallback, useEffectEvent } from 'react'

Then, inside the hook body (before the useEffect), add:

+  const handleEndedEvent = useEffectEvent((lineNumber: number) => {
+    setIsPlaying(false)
+    onEnded?.(lineNumber)
+  })

And simplify handleEnded inside the snippets.forEach callback:

-      const handleEnded = () => {
-        setIsPlaying(false)
-        if (onEnded) {
-          onEnded(lineNumber)
-        }
-      }
+      const handleEnded = () => handleEndedEvent(lineNumber)

handleEndedEvent always reads the current onEnded at call time, so the dep array stays [snippets].

Also applies to: 114-114

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/hooks/useAudioPreloader.ts` around lines 86 - 91, The handleEnded
function inside useAudioPreloader captures a stale onEnded prop because it's not
updated without tearing down Audio objects; replace the closure with an Effect
Event: import useEffectEvent from react and create a handler like
handleEndedEvent = useEffectEvent((ln) => { setIsPlaying(false); if (onEnded)
onEnded(ln); }); Then, inside the snippets.forEach where you currently assign
handleEnded to audio.onended, use handleEndedEvent(lineNumber) (or pass the
event wrapper) so the audio event always calls the latest onEnded while keeping
the useEffect dependency array as [snippets].

---

1-1: ⚠️ Potential issue | 🟠 Major

Add test file for useAudioPreloader.ts.

The coding guidelines require all helpers and utilities in **/*.ts to have corresponding test files. This hook implements non-trivial logic (Map-based handler tracking, cleanup ordering, load-state gating) but has no test file, while other hooks in the same directory (e.g., useAnonymousProgress.ts, useProgress.ts) all have tests following the naming convention.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/hooks/useAudioPreloader.ts` at line 1, Add a test file for the hook
useAudioPreloader.ts (e.g., useAudioPreloader.test.ts) that verifies its main
behaviors: Map-based handler tracking, cleanup/removal ordering, and load-state
gating. Use a hook test utility (renderHook from `@testing-library/react-hooks` or
React Testing Library) and mock HTMLAudioElement events to simulate load and
error; assert that registered handlers stored in the Map are invoked on load,
removed on cleanup, and that subsequent calls respect the loaded gate so
handlers aren’t re-invoked unnecessarily; also test that removing a specific
handler does not affect others. Reference the hook by name useAudioPreloader in
your tests and follow the existing test patterns used for
useAnonymousProgress.ts and useProgress.ts.